<template>
  <div>
    <Card dis-hover>
      <div class="page-body">
        <Form ref="queryForm" :label-width="90" label-position="left" inline>
          <Row :gutter="16">
            <Col span="8">
              <FormItem :label="L('Keyword')+':'" style="width:100%">
                <Input
                  v-model="pagerequest.keyword"
                  :placeholder="L('RoleName')+'/'+L('DisplayName')+'/'+L('Description')"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Button
              @click="create"
              icon="md-add"
              type="primary"
              v-if="hasPermission('Pages.Roles.Create')"
            >{{L('Add')}}</Button>
            <Button icon="ios-search" @click="getpage" class="toolbar-btn">{{L('Find')}}</Button>
          </Row>
        </Form>
        <div class="margin-top-10">
          <Table
            :loading="loading"
            :columns="columns"
            :no-data-text="L('NoDatas')"
            border
            :data="list"
          ></Table>
          <Page
            show-sizer
            class-name="fengpage"
            :total="totalCount"
            class="margin-top-10"
            @on-change="pageChange"
            @on-page-size-change="pagesizeChange"
            :page-size="pageSize"
            :current="currentPage"
          ></Page>
        </div>
      </div>
    </Card>
    <create-role v-model="createModalShow" @save-success="getpage"></create-role>
    <edit-role v-model="editModalShow" @save-success="getpage"></edit-role>
    <Assign-uiMenu
      v-model="AssignModalShow"
      :permissionTree="permissionTree"
      :uiMenuEle="uiMenuEleAll"
      :checkDataRef="checkDataRef"
      @save-success="saveSuccess"
    ></Assign-uiMenu>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import PageRequest from "@/store/entities/page-request";
import CreateRole from "./create-role.vue";
import EditRole from "./edit-role.vue";
import AssignUiMenu from "./Assign-uiMenu.vue";

class PageRoleRequest extends PageRequest {
  keyword: string = "";
}

@Component({
  components: { CreateRole, EditRole, AssignUiMenu }
})
export default class Roles extends AbpBase {
  //=============================变量=============================
  pagerequest: PageRoleRequest = new PageRoleRequest();

  createModalShow: boolean = false;
  editModalShow: boolean = false;
  AssignModalShow: boolean = false;
  permissionTree = [];
  uiMenuEleAll = [];
  checkDataRef = []; //选中的数量
  columns = [
    {
      title: this.L("RoleName"),
      key: "name"
    },
    {
      title: this.L("DisplayName"),
      key: "displayName"
    },
    {
      title: this.L("Description"),
      key: "description"
    },
    {
      title: this.L("IsStatic"),
      render: (h: any, params: any) => {
        return h("span", params.row.isStatic ? this.L("Yes") : this.L("No"));
      }
    },
    {
      title: this.L("Actions"),
      key: "Actions",
      width: 250,
      render: (h: any, params: any) => {
        var btus = [];
        if (this.hasPermission("Pages.Roles.AssignUiMenu")) {
          var btu = h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small"
              },
              style: {
                marginRight: "5px"
              },
              on: {
                click: () => {
                  this.$store.commit("role/edit", params.row);
                  this.Assign();
                }
              }
            },
            this.L("为角色分配权限")
          );
          btus.push(btu);
        }
        if (this.hasPermission("Pages.Roles.Edit")) {
          var btu = h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small"
              },
              style: {
                marginRight: "5px"
              },
              on: {
                click: () => {
                  this.$store.commit("role/edit", params.row);
                  this.edit();
                }
              }
            },
            this.L("Edit")
          );
          btus.push(btu);
        }
        if (this.hasPermission("Pages.Roles.Delete")) {
          var btu = h(
            "Button",
            {
              props: {
                type: "error",
                size: "small"
              },
              on: {
                click: async () => {
                  this.$Modal.confirm({
                    title: this.L("Tips"),
                    content: this.L("DeleteRolesConfirm"),
                    okText: this.L("Yes"),
                    cancelText: this.L("No"),
                    onOk: async () => {
                      await this.$store.dispatch({
                        type: "role/delete",
                        data: params.row
                      });
                      await this.getpage();
                      this.$Notice.success({
                        title: "成功",
                        desc: "删除成功."
                      });
                    }
                  });
                }
              }
            },
            this.L("Delete")
          );
          btus.push(btu);
        }
        return h("div", btus);
      }
    }
  ];
  //===========================计算属性=============================
  get list() {
    return this.$store.state.role.list;
  }
  get loading() {
    return this.$store.state.role.loading;
  }
  get pageSize() {
    return this.$store.state.role.pageSize;
  }
  get totalCount() {
    return this.$store.state.role.totalCount;
  }
  get currentPage() {
    return this.$store.state.role.currentPage;
  }

  //==================================方法=============================
  edit() {
    this.editModalShow = true;
  }

  create() {
    this.createModalShow = true;
  }
  pageChange(page: number) {
    this.$store.commit("role/setCurrentPage", page);
    this.getpage();
  }
  pagesizeChange(pagesize: number) {
    this.$store.commit("role/setPageSize", pagesize);
    this.getpage();
  }
  async Assign() {
    //授权
    await this.getPermissionTree();
    this.AssignModalShow = true;
  }
  async saveSuccess() {
    this.getpage();

    /*
    await this.$store.dispatch({
      type: "role/getAllPermissions"
    });
    this.getpage();*/
  }
  async getPermissionTree() {
    //获取所有 菜单数
    var req = await this.$store.dispatch({
      type: "uiMenu/getPermissionTree"
    });
    this.checkDataRef = [];
    //console.log(this.$store.state.role.editRole.grantedPermissions);
    //console.log(req.children);
    this.permissionTree = this.CheckAdd(req.children);
    //console.log(this.permissionTree);
  }
  async getAllUiMenuEle() {
    //获取所有 菜单 权限按钮 数据
    var req = await this.$store.dispatch({
      type: "uiMenu/getAllUiMenuEle"
    });

    this.uiMenuEleAll = req;
  }
  async getpage() {
    this.pagerequest.maxResultCount = this.pageSize;
    this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;
    await this.$store.dispatch({
      type: "role/getAll",
      data: this.pagerequest
    });
  }

  async created() {
    this.getpage();
    await this.getPermissionTree();
    this.getAllUiMenuEle(); //获取所有 菜单 权限按钮 数据
    await this.$store.dispatch({
      type: "role/getAllPermissions"
    });
  }
  CheckAdd(objP) {
    //已经 有授权的打勾添加
    var Tmp = [];
    objP.forEach(ele => {
      if (this.$store.state.role.editRole.grantedPermissions == undefined)
        return; //undefined
      if (
        this.$store.state.role.editRole.grantedPermissions.indexOf(
          ele.permissionKey
        ) == -1
      ) {
        ele.checked = false;
      } else {
        ele.checked = true;
        this.checkDataRef.push(ele.permissionKey);
      }
      ele.children = this.CheckAdd(ele.children);
      Tmp.push(ele);
    });
    return Tmp;
  }
}
</script>